.conant{
    display: flex;
    flex-direction: column;
    flex: auto;
    min-height: 31rem;
    margin: 2rem;
}
.top{
    font-size: 1.2rem;
    font-weight: bold;
}

.left{
    width: 18%;
    display: flex;
    flex-direction: column;
}
.bottom{
    display: flex;
    flex: auto;
    /* margin-top: 1rem; */
}
.bottom .cityValue{
    text-indent: 1rem;
    align-items: center;
    flex: auto;
    display: flex;
}
.bottom .name{
    font-size: 1.2rem;
    cursor: pointer;
}
.bottom .num{
    /* font-size: 1.6rem;
    margin-left: 1.4rem; */
}


.leftTop{
    background: url('../img/indexS/centerBorder2.png') no-repeat center center / 100% 100%;
    width: 100%;
    height: 7rem;
    margin: 1rem 0;
    text-align: left;
}
.leftTopTip{
    padding-top: 1rem;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
}
.leftTopNum{
    padding-top: 0.2rem;
    font-size: 2.5rem;
    text-align: center;
    display: flex;
    overflow: hidden;
}
.leftBottom{
    background: url('../img/indexS/centerBorder3.png') no-repeat center center / 100% 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
}

.map{
    background: url(../img/indexS/centerBorder1.png) no-repeat center center / 100% 100%;
    margin-top: 1rem;
    margin-left: 0.9rem;
    flex: auto;
    position: relative;
}

body .clock .time-container .digit {
    width: 2.5rem;
    height: 3.5rem;
}

body .clock .time-container {
	margin: 0 .1rem;
}

body .clock .time-container .num {
	font-size: 3rem;
}

body .clock .time-container .digit .ring.ring-right {
	top: 2rem;
}